<template>
	<view>

		<view class="couponCenter">
			<!-- <image src="../../static/会员卡yi/蒙版-1.png" mode=""></image> -->
		</view>
		<view class="couponCenterContainer">
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">

				<view class="couponGo ">
					<image class="couponImg" src="../../static/会员卡yi/path.png" mode=""></image>
					<view style="font-size: 34rpx;color: rgb(73, 73, 73);font-weight: 600;">
						先领券 ·再下单
					</view>
					<block v-for="(item,index) in list" :key="index">
						<view class="couponCenterList">
							<view class="couponList ">
								<view class="flex-between">
									<view class="flex">
										<view class="couponPrice ">

											<view style="height: 100%;" class="flex-column">
												<text class="font-overflow"
													style="color:rgb(255, 0, 0);font-size: 40rpx;margin-bottom: 10rpx;width: 180rpx;text-align: center;">{{item.discount_intensity}}元</text>
												<!-- 1 抵扣券 2 新人券 3 赠送券 -->
												<text class="font-overflow"
													style="color: rgb(255, 0, 0);width: 180rpx;text-align: center;">
													{{item.type == 3 ? '无门槛' : '满' + item.trigger_amount + '可用'}}
												</text>
											</view>

										</view>
										<view class="border">

										</view>
										<view class="flex-column-between-start"
											style="height: 156rpx;margin-left: 20rpx;">
											<view>
												<view
													style="color: rgb(0, 0, 0);;font-size: 32rpx;font-weight: 600;margin-bottom: 5rpx;">
													{{item.name}}
												</view>
												<view class="">
													<!--  -->
													<text
														style="color: rgb(153, 153, 153);">到期时间：{{extractedDate(item.end_time)}}</text>
												</view>
											</view>
											<view class="">
												<text class="font-overflow"
													style="color: rgb(153, 153, 153);width: 300rpx;display: inline-block;">{{item.desc}}</text>
											</view>

										</view>
									</view>
									<view class="useBtn flex" @click="receiveCoupon(item)">
										立即抢
									</view>
								</view>

							</view>

						</view>
					</block>

				</view>

			</mescroll-body>
		</view>
	</view>

</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: '',
				list: [],
				token: uni.getStorageSync('login').token,
				couponPageList: [{
						newcomer: true,
						// 优惠价格
						couponPagePrice: 50000,

						// 实际需要支付多少才可以使用
						actualPaymentPrice: 100000,
						// 到期时间
						expirationTime: '2021-07-31',
						classification: 1,
						// 1 【新用户福利】全场可用，抵扣任何商品 2 全场可用，抵扣任何商品 3 会员商品，积分商品不可使用该优惠券
						text: '[新用户福利]全场可用，抵扣任何商品【新用户福利】全场可用，抵扣任何商品【新用户福利】全场可用，抵扣任何商品'
					}, {
						newcomer: false,
						// 优惠价格
						couponPagePrice: 888,

						// 实际需要支付多少才可以使用
						actualPaymentPrice: 10000,
						// 到期时间
						expirationTime: '2021-07-31',
						// 1 【新用户福利】全场可用，抵扣任何商品 2 全场可用，抵扣任何商品 3 会员商品，积分商品不可使用该优惠券
						classification: 2,
						text: '全场可用，抵扣任何商品 3 会员商品'
					}, {

						newcomer: false,
						// 优惠价格
						couponPagePrice: 50,

						// 实际需要支付多少才可以使用
						actualPaymentPrice: 100,
						// 到期时间
						expirationTime: '2021-07-31',
						// 1 【新用户福利】全场可用，抵扣任何商品 2 全场可用，抵扣任何商品 3 会员商品，积分商品不可使用该优惠券
						classification: 3,
						text: '会员商品，积分商品不可使用该优惠券'

					},
					{

						newcomer: false,
						// 优惠价格
						couponPagePrice: 50,

						// 实际需要支付多少才可以使用
						actualPaymentPrice: 100,
						// 到期时间
						expirationTime: '2021-07-31',
						// 1 【新用户福利】全场可用，抵扣任何商品 2 全场可用，抵扣任何商品 3 会员商品，积分商品不可使用该优惠券
						classification: 1,
						text: '【新用户福利】全场可用，抵扣任何商品'

					}
				],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		onShow() {
			this.mescroll?.resetUpScroll();
			this.$at.releaseKey('submit');
		},
		computed: {

			extractedDate: function() {
				return function(time) {
					console.log(time)
					return time.split(' ')[0];
				};
			}
		},
		methods: {
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.couponList,
					data: {
						page: scroll.num,
						limit: 10,
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
			async receiveCoupon(item) {
				console.log(item)
				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						
					
						
						const result = await this.$http.post({
							url: this.$api.receiveCoupon,
							data: {
								id:[item.id]
							},
							headers: {
								'Authorization': `Bearer ${this.token}`
							}
						
						})
						
						if (result.code == 0) {
						
						
						   this.$at.releaseKey('submit');
						
						
							this.$sun.toast(result.msg, 'none')
							// this.$sun.toast(resPoster.msg, 'none')
							setTimeout(()=>{
								this.mescroll?.resetUpScroll();
							},500)
						
						} else {
						   this.$at.releaseKey('submit');
							this.$sun.toast(result.msg, 'none')
						}	
						
				
					}
				});
				
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		// background: #f6f6f6;
	}

	.couponCenter {

		background-repeat: no-repeat;
		background-size: contain;
		background-image: url('../../static/会员卡yi/蒙版-1.png');


		height: 350rpx;
	}

	.couponCenterContainer {
		margin: 15rpx;

		position: relative;
		overflow: hidden;

		.couponGo {
			.couponImg {
				width: 185rpx;
				height: 159rpx;
				position: absolute;
				top: -50rpx;
				left: 10rpx;
				z-index: 1;

			}

			padding: 30rpx;
			border-radius: 20rpx;
			width: 718rpx;
			background: rgb(255, 255, 255);

			.couponCenterList {
				width: 658rpx;

				margin-top: 30rpx;


				.couponList {

					margin-top: 30rpx;
					padding-right: 10rpx;

					;
					background: rgb(254, 247, 245);

					.couponPrice {
						width: 190rpx;
						height: 186rpx;

						position: relative;



						.price {
							// padding: 109rpx 0 0 10rpx;
							color: rgb(255, 97, 69);
							font-size: 46rpx;
							height: 100%;
						}

						.price-active {
							padding: 95rpx 0 0 10rpx;
							color: rgb(255, 97, 69);
							font-size: 46rpx;
						}
					}

					.border {
						border: 1px dashed rgb(255, 228, 228);
						width: 0;
						height: 65.5px;
					}

					.useBtn {
						border-radius: 40rpx;

						border-radius: 58px;

						background: linear-gradient(101.86deg, rgb(248, 86, 70) 2.039%, rgb(255, 138, 128) 98.824%);
						width: 126.88rpx;
						height: 56rpx;
						font-size: 24rpx;
						color: #fff;
					}


				}
			}
		}
	}
</style>